<template>
  <!-- 头部导航区内容 -->
  <div class="header">
    <img class="header-logo" >
    <div class="header-navigation">
      <button class="navigation-ecah" 
      :class="{show:echaIndex==index}" 
      v-for="(item, index) in navigatorData" :key="index"
      @click="$router.push({ path: item.path }), (echaIndex=index)"
       >{{item.name}}</button>
       <button class="back" @click=loginout()>退出登录</button>
    </div>
  </div>
</template>

<script>
import {removeToken } from '@/utils/auth'
export default {
props: {
 jump: {},
},
data () {
  return {
    navigatorData: [
       { name: '成长报告', path: "/report1" },
       { name: '图片库' ,path:"/gallery"},
       { name: '个人信息',path: "/myInfo" }
    ],
    echaIndex: 0,
  }
},
methods:{
  loginout(){
    this.$confirm('您确认退出登录吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    .then(() => {
      removeToken()
      this.$router.go(0)
    })
    .catch((err) => err)
  }
},
created(){
  this.echaIndex=this.jump
}
}
</script>

<style>

/* 头部导航区内容 */
.header{
position: relative;
height: 4.75rem;
margin: 1.25rem 3rem 1.25rem 10rem;
}
.header-logo{
width: 5rem;
height: 3.75rem;
position:absolute;
}

/* 导航区 */
.header-navigation {
position: absolute;
right: 0;
}

/* 标签导航区 */
.navigation-ecah {
font-size: 1.25rem;
border: 0rem solid;
margin: 1.875rem 0rem 0 1.5625rem;
background: #ffffff;
}

.show {
color: #7C0000;
padding-bottom: .3125rem;
border-bottom: .1875rem solid #7C0000;
}

.back{
margin-left:10rem;
margin-right:2rem;
padding:0.5rem 1rem;
font-size:0.8rem;
background-color:#7c0000;
color:#ffffff;
border:#7C0000;
}

</style>